<template>
    <div>
        <h3>房号列表</h3>
        <input type="button" value="批量上架" @click="upd(1)" class="btn btn-warning">
        <input type="button" value="批量下架" @click="upd(0)" class="btn btn-warning">
        <input type="button" value="批量删除" @click="del()" class="btn btn-danger">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="headall"><span>全选</span>
                    </td>
                    <td>房名名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="bodyall">
                    </td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.HouseNoNumber }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>{{ item.State == 1 ? "上架" : "下架" }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import type { RefSymbol } from '@vue/reactivity';
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
let checked = ref();
let ids = ref([])

let data: any = reactive({
    list: []
})

onMounted(() => {
    gethouno();
})

//批量上架
const upd = (state: any) => {
    axios({
        method: "get",
        url: "/api/House/Updall",
        params: {
            ids: ids.value.toString(),
            state: state
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert('修改成功');
                checked.value = "",
                    ids.value = []
                gethouno();
            }
        })
}
//批量删除
const del = () => {
    if(confirm('确定删除吗')){
        axios({
        method: "delete",
        url: "/api/House/Delall",
        params: {
            ids: ids.value.toString(),
        }
    })
        .then(res => {
            if (res.data > 0) {
                alert('删除成功');
                checked.value = "",
                    ids.value = []
                gethouno();
            }
        })
    }
    
}

//全选全不选
const headall = () => {
    checked.value = !checked.value
    if (checked.value == true) {
        ids.value = data.list.map((item: any) => {
            return item.Id
        })
    }
    else {
        ids.value = []
    }
}
//反选
const bodyall = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

const gethouno = () => {
    axios({
        method: "get",
        url: "/api/House/ShowHouseNo"
    })
        .then(res => {
            console.log(res)
            data.list = res.data
        })
}


</script>

<style scoped></style>